<template>
  <!-- 顶部导航栏 -->
  <div class="top-navbar">
    <div class="wrap">
      <!-- 左侧手机操作系统链接 -->
      <div class="links os-links" style="color:#FFFFFF;">
        <router-link class="link-type" :to="'/'" style="width:140px;"><span style="color: #b0b0b0;cursor: pointer;">外卖商城首页</span></router-link>
        <el-input @input="handleInput" v-show="searchShow" class="search-input" placeholder="请输入餐品关键字" v-model="commodity" clearable>
        </el-input>
      </div>
      <!-- 右侧用户相关链接 -->
      <div class="links user-links">
        <div v-if="$store.state.dianUser.dianName" style="color: #e96140;" class="link" @click="goRouter('/dianShangLogin')">您好，{{$store.state.dianUser.dianName}}</div>
        <div v-else style="color: #e96140;" class="link" @click="goRouter('/dianShangLogin')">亲，请登录</div>
        <span class="separator" v-if="!$store.state.dianUser.dianName">|</span>
        <div v-if="!$store.state.dianUser.dianName" class="link" @click="goRouter('/dianShangRegister')">免费注册</div>
        <span class="separator">|</span>
        <Dropdown>
          <a href="javascript:void(0)" style="color: #b0b0b0;">
            个人中心
            <Icon type="arrow-down-b"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem v-if="$store.state.dianUser.dianName">
              <router-link class="link-type" :to="'/dianUserCenter'"><span style="color:#e01222;">我的信息</span> </router-link>
            </DropdownItem>
            <DropdownItem>
              <router-link class="link-type" :to="'/orderList'"><span style="color:#e01222;">我的订单</span> </router-link>
            </DropdownItem>

            <DropdownItem>
              <router-link class="link-type" :to="'/goodsCar'"><span style="color:#e01222;">我的购物车</span> </router-link>
            </DropdownItem>
            <DropdownItem v-if="$store.state.dianUser.dianName">
              <span @click="exit()" style="color:#e01222;">退出登录</span>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>

        <span class="separator">|</span>
        <!-- <el-dropdown placement="top-start" size="small" trigger="click">
            <span class="el-dropdown-link">
              商家服务<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="nav-info">
              <el-dropdown-item>
                <router-link class="link-type" :to="'/login'"><span>商家后台</span> </router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        <Dropdown>
          <a href="javascript:void(0)" style="color: #b0b0b0;">
            商家服务
            <Icon type="arrow-down-b"></Icon>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem>
              <router-link class="link-type" :to="'/login'"><span style="color:#e01222;">商家后台</span> </router-link>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from '@/utils/EventBus'

export default {
  data() {
    return {
      searchShow: true,
      commodity: null,
      timer: null
    }
  },
  created() {

  },
  watch: {
    '$route': {
      handler(to, from) {
        if (to.path !== '/') {
          this.searchShow = false
        } else {
          this.searchShow = true
        }
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  },
  methods: {
    // 节流搜索
    handleInput(val) {
      if (val == '') {
        EventBus.$emit('searchGoods', {});
      } else {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          EventBus.$emit('searchGoods', { commodity: this.commodity });
        }, 1500)
      }
    },
    goRouter(router) {
      if (router == '/dianShangLogin') {
        if (this.$store.state.dianUser.dianName != '') {
          return false
        }
      }
      this.$router.push({
        path: router
      })
    },
    exit() {
      this.$confirm('确定退出当前用户吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('DianLogOut').then(() => {
          this.$router.push({ path: '/' }).catch(() => { });
        })
      }).catch(() => { });
    }
  }
}
</script>

<style lang="scss" scoped>
.top-navbar {
  width: 100%;
  position: relative;
  height: 40px;
  font-size: 12px;
  background-color: #292c33;

  .wrap {
    width: 1226px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    ::v-deep .el-input__inner {
      color: #b0b0b0;
      background-color: #2a2c32;
      border: #b0b0b0 1px solid;
    }
    ::v-deep.el-input__inner {
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      // 设置光标颜色
      caret-color: #d9694a;
    }
    ::v-deep .el-input__inner:focus {
      // el-input输入时设置边框颜色
      border: #d9694a 1px solid;
    }

    .links {
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      ::v-deep .search-input {
      }
      .link {
        color: #b0b0b0;
        cursor: pointer;
        line-height: 40px;
        &:hover {
          color: #ffffff;
        }
      }
      .separator {
        margin: 0 0.4em;
        color: #b0b0b0;
        line-height: 40px;
      }
    }
    .el-dropdown {
      color: #b0b0b0;
      font-size: 12px;
    }
  }
}
</style>